'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _rcTweenOne = require('rc-tween-one');

var _row = require('antd/lib/row');

var _row2 = _interopRequireDefault(_row);

var _col = require('antd/lib/col');

var _col2 = _interopRequireDefault(_col);

var _collapse = require('antd/lib/collapse');

var _collapse2 = _interopRequireDefault(_collapse);

var _radio = require('antd/lib/radio');

var _radio2 = _interopRequireDefault(_radio);

var _Icon = require('./common/Icon');

var _Icon2 = _interopRequireDefault(_Icon);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var Panel = _collapse2['default'].Panel;

var RadioButton = _radio2['default'].Button;
var RadioGroup = _radio2['default'].Group;

var Layout = function (_Component) {
    (0, _inherits3['default'])(Layout, _Component);

    function Layout() {
        var _ref;

        var _temp, _this, _ret;

        (0, _classCallCheck3['default'])(this, Layout);

        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
        }

        return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref = Layout.__proto__ || Object.getPrototypeOf(Layout)).call.apply(_ref, [this].concat(args))), _this), _this.onChange = function (e, key) {
            var type = e.target.value;
            var value = _this.props.value;

            value[key] = type;
            _this.props.onChange('layout', value);
        }, _this.getFlexChildToRender = function () {
            var _this$props = _this.props,
                locale = _this$props.locale,
                value = _this$props.value;
            var flexSelect = locale.flexSelect,
                flexName = locale.flexName;

            var getItemToChild = function getItemToChild(data, $key) {
                return Object.keys(data).map(function (key) {
                    return _react2['default'].createElement(
                        RadioButton,
                        { value: key, key: key },
                        _react2['default'].createElement(_Icon2['default'], { type: $key + '-' + key, prompt: data[key] })
                    );
                });
            };
            var rowItem = Object.keys(flexSelect).map(function (key) {
                var item = flexSelect[key];
                var nameObj = flexName[key];
                return _react2['default'].createElement(
                    _row2['default'],
                    { gutter: 8, key: key },
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 3 },
                        _react2['default'].createElement(_Icon2['default'], { type: nameObj.icon, prompt: nameObj.name })
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 21 },
                        _react2['default'].createElement(
                            RadioGroup,
                            {
                                value: value[key],
                                size: 'small',
                                onChange: function onChange(e) {
                                    _this.onChange(e, key);
                                }
                            },
                            getItemToChild(item, key)
                        )
                    )
                );
            });
            return _react2['default'].createElement(
                'div',
                { key: 'flex', style: { overflow: 'hidden' } },
                rowItem
            );
        }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
    }

    (0, _createClass3['default'])(Layout, [{
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                value = _props.value,
                locale = _props.locale,
                header = _props.header,
                props = (0, _objectWithoutProperties3['default'])(_props, ['value', 'locale', 'header']);

            var radioChildrenToRender = _react2['default'].createElement(
                RadioGroup,
                {
                    value: value.display,
                    size: 'small',
                    onChange: function onChange(e) {
                        _this2.onChange(e, 'display');
                    }
                },
                Object.keys(locale.displaySelect).map(function (key) {
                    return _react2['default'].createElement(
                        RadioButton,
                        { value: key, key: key },
                        _react2['default'].createElement(
                            'div',
                            { style: {
                                    height: 24,
                                    overflow: 'hidden'
                                } },
                            _react2['default'].createElement(_Icon2['default'], { type: key === 'none' ? 'eye-invisible' : key, prompt: locale.displaySelect[key] })
                        )
                    );
                })
            );
            var flexChild = value.display === 'flex' ? this.getFlexChildToRender() : null;
            return _react2['default'].createElement(
                Panel,
                (0, _extends3['default'])({}, props, { header: header || locale.header }),
                _react2['default'].createElement(
                    _row2['default'],
                    { gutter: 8 },
                    _react2['default'].createElement(
                        _col2['default'],
                        null,
                        locale.name
                    )
                ),
                _react2['default'].createElement(
                    _row2['default'],
                    { gutter: 8 },
                    _react2['default'].createElement(
                        _col2['default'],
                        null,
                        radioChildrenToRender
                    )
                ),
                _react2['default'].createElement(
                    _rcTweenOne.TweenOneGroup,
                    {
                        enter: { height: 0, type: 'from', duration: 300, ease: 'easeInOutCirc' },
                        leave: { height: 0, duration: 300, ease: 'easeInOutCirc' },
                        style: { overflow: 'hidden' }
                    },
                    flexChild
                )
            );
        }
    }]);
    return Layout;
}(_react.Component);

Layout.propTypes = {
    className: _propTypes2['default'].string,
    header: _propTypes2['default'].string,
    font: _propTypes2['default'].array,
    value: _propTypes2['default'].object,
    onChange: _propTypes2['default'].func,
    locale: _propTypes2['default'].object
};
Layout.defaultProps = {
    className: 'editor-layout',
    value: {
        display: 'block',
        alignItems: 'stretch',
        justifyContent: 'flex-start'
    },
    onChange: function onChange() {}
};
exports['default'] = Layout;


Layout.componentName = 'EditorLayout';
module.exports = exports['default'];